<template>
    <div class="ele-body">
      <el-card shadow="never">
        <!-- 搜索表单 -->
        <el-form
          :model="where"
          label-width="77px"
          class="ele-form-search"
          @keyup.enter.native="reload"
          @submit.native.prevent
        >
          <el-row :gutter="15">
            <el-col :lg="12" :md="12">
              <el-form-item label="支付方式:">
                <PageSelect
                  :placeholder="'请选择支付方式'"
                  v-model="where.pay_way"
                  :url="'/payway/index'"
                  :optionLable="'name'"
                  :optionvalue="'id'"
                  :multiple="false"
                />
              </el-form-item>
            </el-col>
            <el-col :lg="12" :md="12">
              <el-form-item label="订单账号:">
                <el-input
                  placeholder="请输入订单账号"
                  v-model="where.pay_order_number"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="12" :md="12">
              <el-form-item label="支付状态:">
                <el-select
                  clearable
                  v-model="where.pay_status"
                  placeholder="请选择支付状态:"
                  class="ele-fluid"
                >
                  <el-option label="已支付" :value="1" />
                  <el-option label="未支付" :value="0" />
                </el-select>
              </el-form-item>
            </el-col> 
            <el-col :lg="12" :md="12">
              <el-form-item label="解决状态:">
                <el-select
                  clearable
                  v-model="where.status"
                  placeholder="请选择解决状态:"
                  class="ele-fluid"
                >
                  <el-option label="未解决" :value="1" />
                  <el-option label="已解决" :value="2" />
                </el-select>
              </el-form-item>
            </el-col> 
            <el-col :lg="12" :md="12">
              <div class="ele-form-actions">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  class="ele-btn-icon"
                  @click="reload"
                  >查询
                </el-button>
                <el-button @click="reset">重置</el-button>
                <el-button @click="exportExcel"
                  >导出
                  <a
                    id="Export"
                    :href="
                      process +
                        `order/export?pay_time=${
                          this.where.pay_time ? this.where.pay_time : ''
                        }&member_id=${
                          this.where.member_id ? this.where.member_id : ''
                        }&member_account=${
                          this.where.member_account
                            ? this.where.member_account
                            : ''
                        }&role_id=${
                          this.where.role_id ? this.where.role_id : ''
                        }&promote_id=${
                          this.where.promote_id ? this.where.promote_id : ''
                        }&pay_way=${
                          this.where.pay_way ? this.where.pay_way : ''
                        }&pay_order_number=${
                          this.where.pay_order_number
                            ? this.where.pay_order_number
                            : ''
                        }&pay_status=${
                          this.where.pay_status
                            ? this.where.pay_status
                            : ''
                        }&authinfo=${this.urlEncodedToken}`
                    "
                    target="_blank"
                    style="color: white;"
                  ></a></el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <!-- 数据表格 -->
        <ele-pro-table
          ref="table"
          :where="where"
          :datasource="url"
          :method="'post'"
          :columns="columns"
          :selection.sync="selection"
          height="calc(100vh - 315px)"
        >
            <!-- 操作列 -->
            <template slot="action" slot-scope="{ row }">
                <el-link
                    type="primary"
                    :underline="false"
                    icon="el-icon-edit"
                    @click="openEdit(row)"
                    v-if="row.status==1"
                    >异常处理
                </el-link>
            </template>
        </ele-pro-table>
      </el-card>
      <!-- 编辑弹窗 -->
      <OrderEdit :data="current" :visible.sync="showEdit" @done="reload" />
    </div>
  </template>
  <script>
  import { mapGetters } from "vuex";
  import OrderEdit from "./order-edit";
  import PageSelect from "@/components/pageSelect/index.vue";
  export default {
    components: { OrderEdit, PageSelect },
    computed: {
      ...mapGetters(["permission"])
    },
    data(){
        return{
                  // 表格数据接口
            url: "/Orderer/index",
            // 表格列配置
            columns: [
                {
                    columnKey: "selection",
                    type: "selection",
                    width: 45,
                    align: "center",
                    fixed: "left"
                },
                {
                    prop: "id",
                    label: "ID",
                    width: 60,
                    align: "center",
                    showOverflowTooltip: true,
                    fixed: "left"
                },
                {
                    prop: "pay_order_number",
                    label: "支付订单号",
                    showOverflowTooltip: true,
                    minWidth: 200,
                    align: "center"
                },
                {
                    prop: "pay_status",
                    label: "支付状态",
                    showOverflowTooltip: true,
                    minWidth: 200,
                    align: "center",
                    formatter: (row, column, cellValue) => {
                        if (cellValue == 0) {
                        return "未支付";
                        } else if (cellValue == 1) {
                        return "已支付";
                        }
                    }
                },
                {
                    prop: "status",
                    label: "解决状态",
                    showOverflowTooltip: true,
                    minWidth: 200,
                    align: "center",
                    formatter: (row, column, cellValue) => {
                        if (cellValue == 1) {
                        return "未解决";
                        } else if (cellValue == 2) {
                        return "已解决";
                        }
                    }
                },
                {
                    prop: "pay_amount",
                    label: "支付金额",
                    showOverflowTooltip: true,
                    minWidth: 200,
                    align: "center"
                },
                {
                    prop: "pay_time",
                    label: "支付时间",
                    showOverflowTooltip: true,
                    minWidth: 200,
                    align: "center",
                    formatter: (row, column, cellValue) => {
                        return this.$util.toDateString(cellValue);
                    }
                },
                {
                    prop: "pay_way",
                    label: "支付方式 ",
                    showOverflowTooltip: true,
                    minWidth: 200,
                    align: "center",
                    formatter: (row, column, cellValue) => {
                        const object = this.paywayList.find(index => {
                        return index.id == cellValue;
                        });
                        return object ? object.name : "未知";
                    }
                },
                {
                    prop: "order_ip",
                    label: "支付IP",
                    showOverflowTooltip: true,
                    minWidth: 200,
                    align: "center"
                },
                {
                    prop: "cost",
                    label: "原价",
                    showOverflowTooltip: true,
                    minWidth: 200,
                    align: "center"
                },
                {
                    prop: "device",
                    label: "设备号",
                    showOverflowTooltip: true,
                    minWidth: 200,
                    align: "center",
                    formatter: (row, column, cellValue) => {
                        if (cellValue == "idfa") {
                        return "苹果";
                        } else if (cellValue == "imei") {
                        return "安卓";
                        }
                    }
                },
                {
                    prop: "collect_account",
                    label: "收款账号",
                    showOverflowTooltip: true,
                    minWidth: 200,
                    align: "center"
                },
                {
                    prop: "add_time",
                    label: "异常时间",
                    showOverflowTooltip: true,
                    minWidth: 200,
                    align: "center",
                    formatter: (row, column, cellValue) => {
                        return this.$util.toDateString(cellValue);
                    }
                },
                {
                    prop: "mark",
                    label: "备注",
                    showOverflowTooltip: true,
                    minWidth: 240,
                    align: "center"
                },
                {
                    columnKey: 'action',
                    label: '操作',
                    width: 150,
                    align: 'center',
                    resizable: false,
                    slot: 'action',
                    fixed: 'right'
                }
            ],
            // 表格搜索条件
            where: {},
            // 表格选中数据
            selection: [],
            // 当前编辑数据
            current: null,
            // 是否显示编辑弹窗
            showEdit: false,
            // 支付方法
            paywayList: [],
            process: process.env.VUE_APP_API_BASE_URL,
            token: "",
            base64EncodedToken: "",
            urlEncodedToken: ""
        }
    },
    watch: {
        token(value) {
            if (value) {
                this.base64EncodedToken = btoa(value);
                // console.log(
                // "token加密第一次的值为:",
                // value,
                // "token加密第二次的值为:",
                // this.base64EncodedToken
                // );
                this.urlEncodedToken = encodeURIComponent(this.base64EncodedToken);
                // console.log(
                // "token加密第二次的值为:",
                // this.base64EncodedToken,
                // "token加密第三次的值为:",
                // this.urlEncodedToken
                // );
            }
        }
    },
    created(){
        this.getToken();
        this.$http
        .post("/payway/getAll")
        .then(res => {
            if (res.data.code === 0) {
            this.paywayList = res.data.data;
            } else {
            this.$message.error(res.data.msg);
            }
        })
        .catch(e => {
            this.loading = false;
            this.$message.error(e.message);
        });
    },
    mounted(){

    },
    methods:{
        // 获取token
        getToken() {
            this.token = localStorage.getItem("access_token");
        },
        /* 下载数据Excel */
        exportExcel() {
            var dtx = document.getElementById("Export");
            dtx.click();
        },
        /* 刷新表格 */
        reload() {
            this.$refs.table.reload({ where: this.where });
        },
        /* 重置搜索 */
        reset() {
            this.where = {};
            this.reload();
        },
        /* 显示编辑 */
        openEdit(row) {
            this.current = row;
            this.showEdit = true;
        },
    },
  }
  </script>
  <style scoped></style>
  
